<template>
	<view class="g-login-main">
		<view class="u-title f-tac f-fc-whilte">OMS运营管理系统</view>
		<view class="g-form-main">
			<view class="u-form-item f-frowceny f-fz15">
				<image src="../../static/icon/user/icon_phone_whilte.png" mode="aspectFit" class="icon"></image>
				<input type="number" v-model="dataForm.phone" placeholder="手机号" class="f-fc-whilte" placeholder-style="color: #FFFFFF;" />
			</view>
			<view class="u-form-item f-frowceny f-fz15 f-mt17">
				<image src="../../static/icon/user/icon_psw_whilte.png" mode="aspectFit" class="icon"></image>
				<input type="password" v-model="dataForm.password" placeholder="请输入您的密码" class="f-fc-whilte" placeholder-style="color: #FFFFFF;" />
			</view>
		</view>
		<button class="u-form-btn f-fz16 f-fw650 f-fc-red f-bdr-scircle" :disabled="disabled" @tap="submitForm">登 录</button>
		<view class="u-form-desc f-frowspcen f-fz14 f-fc-whilte">
			<view class="item" hover-class="btn-hover" @tap="toPage('/pages/user/editPsw')">
				忘记密码？
			</view>
			<view class="item" hover-class="btn-hover" @tap="toPage('/pages/user/register')">
				立即注册
			</view>
		</view>
		<image src="../../static/image/login/bc-login.png" mode="" class="login-bc"></image>
	</view>
</template>

<script>
import userApi from '../../api/user.js';
import submitFormMix from '../../mixins/submit.js';
import util from '../../util/util.js';
import MD5Util from '../../libs/md5.js';
export default {
	mixins: [submitFormMix],
	data() {
		return {
			dataForm: {
				phone: '',
				password: ''
			},
			rules: [
				{
					name: 'phone',
					rule: ['required', 'isMobile'],
					msg: ['请输入手机号', '请输入正确的手机号']
				},
				{
					name: 'password',
					rule: ['required', 'isEnAndNo'],
					msg: ['请输入密码', '密码必须是8~20位数字和字母组合']
				}
			]
		};
	},
	onLoad() {
		const that = this;
		that.dataForm.phone = uni.getStorageSync('phone') || '';
	},
	methods: {
		/**
		 * 提交表单
		 * */

		submitForm(callBack) {
			const that = this;
			let params = Object.assign({}, that.dataForm);
			params.password = MD5Util.hexMD5(params.password);
			userApi.login(params).then(res => {
				uni.setStorageSync('phone', params.phone);
				uni.showToast({
					icon: 'success',
					title: '登录成功',
					duration: 1000
				});
				that.throttle(()=>{
					uni.switchTab({
						url: '/pages/tabBar/index/index'
					});
				}, null, 1000, null);
				callBack();
			}).catch(() => {
				callBack();
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.g-login-main {
	height: 100vh;
	padding-top: 300rpx;
	position: relative;
	.login-bc {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.u-title {
		font-size: 60rpx;
		font-weight: 700;
		text-shadow: 0px 12px 8px rgba(227,24,14,0.6);
	}
	.g-form-main {
		width: 560rpx;
		margin: 166rpx auto 84rpx;
		.u-form-item {
			height: 96rpx;
			border-bottom: 2rpx solid #ffffff;
			.icon {
				width: 28rpx;
				height: 36rpx;
				margin: 0 36rpx;
			}
		}
	}
	.u-form-btn {
		width: 640rpx;
		height: 88rpx;
		line-height: 88rpx;
		margin: auto;
		box-shadow: 2px 11px 42px 1px rgba(76, 12, 1, 0.34);
	}
	.u-form-desc {
		width: 640rpx;
		margin: 20rpx auto 0;
		.item {
			padding: 40rpx 0;
		}
	}
}
</style>
